<div class="box-container">
    <div class="main-content">
        <div class="main-content-wrap">
            <div class="left-panel">
                <nz-tree
                    #objTreeComponent
                    [nzData]="listData"
                    nzCheckable
                    [nzCheckedKeys]="defaultKeys"
                    (nzCheckBoxChange)="selectedAreaChanged($event)">
                </nz-tree>
            </div>

            <div class="right-panel">
                <div class="right-top-box">
                    <div class="right-content">
                        <nz-card [nzTitle]="'水位历时曲线'"
                                 class="card">
                            <div
                                echarts
                                [options]="processOpt"
                                (chartInit)="levelChartInit($event)"
                                style="height: 329px;"
                            ></div>
                        </nz-card>
                        <nz-card [nzTitle]="'流量历时曲线'"
                                 class="card">
                            <div
                                echarts
                                [options]="processOpt"
                                (chartInit)="fluxChartInit($event)"
                                style="height: 329px;"
                            ></div>
                        </nz-card>
                        <nz-card [nzTitle]="'宁夏区间耗水量'"
                                 class="row-card">
                            <div
                                echarts
                                [options]="barOpt"
                                [merge]="barOptChange"
                                style="height: 329px;"
                            ></div>
                        </nz-card>
                        <nz-card [nzTitle]="'监测值'"
                                 class="row-card">
                            <nz-table
                                #dataTable
                                nzBordered
                                [nzData]="tableData"
                                nzSize="middle">
                                <thead>
                                <tr>
                                    <th rowspan="2">日期</th>
                                    <th colspan="2" *ngFor="let item of tableHead">{{item.title}}</th>
                                    <th rowspan="2">宁夏耗水量(亿m³)</th>
                                </tr>
                                <tr>
                                    <ng-container *ngFor="let item of tableHead">
                                        <th>水位（m）</th>
                                        <th>流量（m³/s）</th>
                                    </ng-container>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let row of dataTable.data">
                                    <td>{{ row.date }}</td>
                                    <ng-container *ngFor="let name of tableHead">
                                        <td>{{ row[name.levelProp] }}</td>
                                        <td>{{ row[name.fluxProp] }}</td>
                                    </ng-container>
                                    <td>{{ row.useWater }}</td>
                                </tr>
                                </tbody>
                            </nz-table>
                        </nz-card>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

